import { useState} from 'react';
import {  Tabs } from 'antd';
import { TextWidget } from '@inbiz/react';
import { observer } from '@formily/react';
import Word from './components/index';
import './index.less';

const { TabPane } = Tabs;


const WordSegmentationManagement = (props: any) => {
  const { configuration,GetPage } = props;


  // 隐藏
  const _configuration = configuration?.filter((item:any) => !item?.hide)
  
  // 存储tab
  const [activeTab, setActiveTab] = useState<any>(_configuration[0].id);


  return (
    <div className="inbiz-Word-segmentation-management">

      {_configuration?.length === 1 ? (
     <Word activeTab={activeTab} GetPage={GetPage}></Word>
      ) : (
        <Tabs
          onChange={setActiveTab}
          defaultActiveKey={
            activeTab
          }
        >
          {_configuration?.map((item: any) => {
            return (
              <TabPane tab={<TextWidget>{item?.title}</TextWidget>} key={item?.id}>
                <Word activeTab={activeTab} GetPage={GetPage}></Word>
              </TabPane>
            );
          })}
        </Tabs>
      )}

    </div>
  );
};

export default observer(WordSegmentationManagement)
